<template>
  <div>
    <!-- 头部组件 -->
    <tmsHeader :tmsheader="tmsheader"></tmsHeader>
   <!-- 订单编号 -->
   <el-row class="dingDanTitle">
     <el-col :span="8">订单号<b style="color:red">*</b>---<span>12345678</span></el-col>
     <el-col :span="8">合同编号号---<span>12345678</span></el-col>
     <el-col :span="8">运输编号---<span>12345678</span></el-col>
   </el-row>
    <!-- 数据渲染 -->

    <div  v-for="(item,index) in tmsPayTabaData" :key="index">
    <el-row class="title">{{item.titleName}}</el-row>
      <el-table border  tooltip-effect="dark" >
        <el-table-column  v-for="(itemcolumn,indexC) in item.tableColumn" :key="indexC" prop="" :label="itemcolumn" align="center" width=250>
        </el-table-column>
      </el-table>
      </div>
         <!--附件-->
    <el-row>
      <h4 class="title">附件</h4>
      <el-upload
          id="upload"
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-row>
       <el-row class="title">备注</el-row>
        <el-input class="bzinput" type="textarea" :rows="3" placeholder="请输入内容" v-model="textarea"></el-input> 
        <el-col class="btngroup">
             <el-button type="success" round>确认结算</el-button>
             <el-button type="danger" round>上报异常</el-button>
             <el-button type="info" @click="returnTo()" round>返回上级</el-button>
             
        </el-col>
  </div>
</template>

<script>
import tmsHeader from '../../TmsHeader';
export default {
  name: "payXiangQing",
  data() {
    return {
      //头部组件的参数
      tmsheader: {
        tmsBigTitle: "客户端",
        tmsATitle: "结算管理",
        tmsBTitle: "结算确认",
      },
      //表格数据
      tmsPayTabaData: [
        {
          titleName: "委托人信息",
          tableColumn: {
            wtf: "委托方",
            wtr: "委托人",
            lxdh: "联系电话",
            thdz: "提货地址",
            thlxr: "提货联系人"
          },
        },
         {
          titleName: "收货人信息",
          tableColumn: {
            wtf: "收货方",
            wtr: "收货人",
            lxdh: "联系电话",
            thdz: "收货地址",
          },
        },
         {
          titleName: "计划时间",
          tableColumn: {
            wtf: "计划装货时间",
            wtr: "计划到货时间"
          },
        },
         {
          titleName: "货物信息",
          tableColumn: {
            wtf: "货名",
            wtr: "规格型号",
            xlxdh: "总包装",
            thdz: "总数量",
            thlxr: "总重量kg",
            lxdh: "总体积m^3",
          }
          },
           {
          titleName: "运费统计",
          tableColumn: {
            wtf: "单价",
            wtr: "总里程（km）",
            lxdh: "运输费（￥）",
            thdz: "其他费用（￥）",
            thlxr: "费用总计（￥）",
          }
          },
           {
          titleName: "实际运费",
          tableColumn: {
            wtf: "单价",
            wtr: "总里程（km）",
            xlxdh: "运输费（￥）",
            thdz: "其他费用（￥）",
            thlxr: "额外费用（￥）",
            lxdh: "费用总计（￥）"
          }
        }
      ],
      //备注文本域的数据
      textarea:"",
      //上传附件的属性
      dialogImageUrl: '',
      dialogVisible: false

    };
  },
  components: {
    tmsHeader,
  },

  methods: {
      returnTo(){
        this.$router.push('/client/Settlement')
      },
      /* 上传附件事件 */
       handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  },
};
</script>
<style scoped lang="less">
.dingDanTitle{
  width: 70%;
  margin-top: 30px;
  border-bottom: 3px dotted ;
  padding-bottom: 10px;
  .el-col{
    font-weight: 600;
    span{
      color: red;
      padding-left:10px;
      font-style:italic
    }
  }
}
.btngroup{
    display: flex;
    justify-content: center;
    margin-top: 50px;
    padding-bottom: 20px;
}
/deep/ .el-upload{
  float: left;
  
}
 .bzinput{
    width: 50%;
    float: left;
}
.el-table {
  display: table-cell;
}
.title {
  width: 15%;
  border-top: 2px solid #f56c6c;
  font-weight: 600;
  font-size: 30px;
  padding:10px 0px;
  margin-top: 30px;
}
</style>